<template>
  <div id="industryPage" @click="bodyClick">
    <HeadNav
      type="industry"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="industry" sort="market"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <a-affix :offset-top="36">
              <div class="model-container">
                <div class="model-bg clearfix" style="padding: 10px 15px">
                  <div class="float-left">
                    <a-cascader
                      :field-names="{
                        label: 'name',
                        value: 'category_id',
                        children: 'child_list',
                      }"
                      :options="categoryList"
                      placeholder="所有类目"
                      change-on-select
                      :allowClear="false"
                      expand-trigger="hover"
                      :popupVisible="catePopup"
                      v-model="chooseCategory"
                      @click.stop="cateClick"
                      @change="selectCategory"
                    />
                  </div>
                  <div class="float-right">
                    <TimeChoose
                      ref="time"
                      :dateShow="true"
                      @changeTime="changeTime"
                    ></TimeChoose>
                  </div>
                </div>
              </div>
            </a-affix>
            <!-- 大盘数据 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">大盘数据-{{ cateText }}</div>
                <div class="market-data">
                  <div>
                    <span class="data-block">
                      <div>
                        <a-icon type="line-chart" />
                        <span class="secondary-font">销售指数</span>
                      </div>
                      <div class="data-font" v-if="saleTotal">
                        {{ saleTotal.toLocaleString() }}
                      </div>
                      <div class="data-font" v-else>--</div>
                      <div
                        class="compete clearfix"
                        style="width: 170px; margin-top: 5px"
                      >
                        <span class="float-left">
                          <span v-if="dateType == 1">昨日对比</span>
                          <span v-if="dateType == 2">上周对比</span>
                          <span v-if="dateType == 3">上月对比</span>
                          <span v-if="dateType == 4">上年对比</span>
                        </span>
                        <span class="red float-right" v-if="compareRate > 0"
                          >+{{ compareRate }}% ↑</span
                        >
                        <span
                          class="green float-right"
                          v-else-if="compareRate < 0"
                          >{{ compareRate * -1 }}% ↓</span
                        >
                        <span class="float-right" v-else>{{
                          compareRate
                        }}</span>
                      </div>
                      <div class="compete clearfix" style="width: 170px">
                        <span class="float-left">上年同期</span>
                        <span class="red float-right" v-if="lastCompareRate > 0"
                          >+{{ lastCompareRate }}% ↑</span
                        >
                        <span
                          class="green float-right"
                          v-else-if="lastCompareRate < 0"
                          >{{ lastCompareRate * -1 }}% ↓</span
                        >
                        <span class="float-right" v-else>{{
                          lastCompareRate
                        }}</span>
                      </div>
                    </span>
                    <!-- 折线图 -->
                    <div
                      style="
                        display: inline-block;
                        width: 770px;
                        margin-left: 15px;
                        vertical-align: top;
                      "
                    >
                      <div id="broken-linedata"></div>
                    </div>
                  </div>
                  <div class="avide-line"></div>
                  <!-- 数据简报 -->
                  <div class="briefing" v-if="chooseCategory[0] == 0">
                    <!-- 最佳类目 -->
                    <div class="briefing-list">
                      <div class="list-left">最佳类目</div>
                      <div>
                        <span class="data-tab data-tab-night">{{
                          briefingInfo.main_cate.main_cate_name
                            ? briefingInfo.main_cate.main_cate_name
                            : "--"
                        }}</span
                        >，占大盘总售的<span class="data-tab data-tab-night">{{
                          briefingInfo.main_cate.sale_ratio
                            ? briefingInfo.main_cate.sale_ratio + "%"
                            : "--"
                        }}</span
                        >，较上个周期<span
                          class="data-tab data-tab-two"
                          v-if="briefingInfo.main_cate.compare_rate > 0"
                          >+{{ briefingInfo.main_cate.compare_rate }}%</span
                        >
                        <span
                          v-else-if="briefingInfo.main_cate.compare_rate < 0"
                          class="data-tab data-tab-three"
                          >{{ briefingInfo.main_cate.compare_rate }}%</span
                        >
                        <span v-else class="data-tab data-tab-two">--</span>
                      </div>
                    </div>
                    <!-- 最佳品种 -->
                    <div class="briefing-list">
                      <div class="list-left">最佳品种</div>
                      <div>
                        <span
                          class="data-tab data-tab-night"
                          style="cursor: pointer"
                          @click="$toDetail(briefingInfo.best_goods.goods_id)"
                          >{{
                            briefingInfo.best_goods.goods_name
                              ? briefingInfo.best_goods.goods_name
                              : "--"
                          }}</span
                        >总计销售指数<span class="data-tab data-tab-night">{{
                          briefingInfo.best_goods.sale_total
                            ? briefingInfo.best_goods.sale_total.toLocaleString()
                            : "--"
                        }}</span
                        >点进入总榜第一名，<span
                          class="data-tab data-tab-night"
                          >{{
                            briefingInfo.best_goods.cate_name
                              ? briefingInfo.best_goods.cate_name
                              : "--"
                          }}</span
                        >类目第一名
                      </div>
                    </div>
                    <!-- 销量异动 -->
                    <!-- <div class="briefing-list">
                      <div class="list-left">销量异动</div>
                      <div>
                        有<span class="data-tab data-tab-two"
                          >{{
                            briefingInfo.sale_abnormal.incr_count
                          }}个品种</span
                        >销量异常增长，<span class="data-tab data-tab-three"
                          >{{
                            briefingInfo.sale_abnormal.decr_count
                          }}个品种</span
                        >销量异常下降
                      </div>
                    </div> -->
                    <!-- 大盘新品 -->
                    <div class="briefing-list">
                      <div class="list-left">大盘新品</div>
                      <div>
                        全行业总计动销品种<span
                          class="data-tab data-tab-night"
                          >{{
                            briefingInfo.industry_new.onsale_num?briefingInfo.industry_new.onsale_num.toLocaleString():'--'
                          }}</span
                        >个，其中包括新品<span
                          class="data-tab data-tab-night"
                          >{{
                            briefingInfo.industry_new.new_sale_num?briefingInfo.industry_new.new_sale_num.toLocaleString():'--'
                          }}</span
                        >个，新品销售指数<span
                          class="data-tab data-tab-night"
                          >{{
                            briefingInfo.industry_new.new_sale_amount?briefingInfo.industry_new.new_sale_amount.toLocaleString():'--'
                          }}</span
                        >点，整体占比为<span class="data-tab data-tab-night"
                          >{{ briefingInfo.industry_new.ratio?briefingInfo.industry_new.ratio+'%':'--' }}</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 品种排名 -->
            <div class="model-container">
              <div class="model-bg" style="padding-bottom: 10px">
                <div class="section-title clearfix">
                  <div class="float-left">品种-{{ cateText }}</div>
                  <div class="float-right">
                    <span
                      class="click-font"
                      @click.stop="$router.push({ name: 'industryrank' })"
                      >查看更多</span
                    >
                  </div>
                </div>
                <!-- 列表 -->
                <div class="table" v-if="goodsRankList.length > 0">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="55" />
                      <col width="280" />
                      <col width="190" />
                      <col width="140" />
                      <col width="140" />
                      <col width="140" />
                      <col width="100" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>排名</td>
                        <td>品种</td>
                        <td>作者</td>
                        <td>出版社</td>
                        <td>类目</td>
                        <td style="text-align: right">销售指数</td>
                        <td style="text-align: right">上期对比</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item, index) in goodsRankList" :key="index">
                        <td style="text-align: center">{{ item.sale_rank }}</td>
                        <td>
                          <div class="goods-desc">
                            <span class="goods-image" v-if="item.cover_pic">
                              <img
                                :src="item.cover_pic"
                                alt
                                style="width: 40px; height: 40px"
                              />
                              <div
                                class="goods-logo prev"
                                v-if="item.is_presale == 1"
                              >
                                预
                              </div>
                              <div
                                class="goods-logo group"
                                v-else-if="item.have_presale == 1"
                              >
                                组
                              </div>
                            </span>
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 40px; min-height: 40px"
                            ></span>
                            <span
                              class="goods-name click-font"
                              :title="item.name"
                              @click="$toDetail(item.goods_id)"
                              >{{ item.name }}</span
                            >
                          </div>
                        </td>
                        <td>
                          <div class="author">
                            <div
                              class="author-name"
                              v-if="item.authors.length == 0"
                            >
                              {{ item.author }}
                            </div>
                            <div
                              class="author-name click-font"
                              v-if="item.authors.length == 1"
                              @click.stop="$toAuthor(item.authors[0].author_id)"
                            >
                              {{ item.author }}
                            </div>
                            <div
                              class="author-name click-font"
                              v-if="item.authors.length > 1"
                              @click.stop="openAuthor(item, index)"
                            >
                              {{ item.author }}
                            </div>
                            <div class="author-list" v-if="item.active">
                              <div v-if="item.authors.length > 0">
                                <div
                                  class="author-item click"
                                  v-for="(aitem, aindex) in item.authors"
                                  :key="aindex"
                                  @click.stop="$toAuthor(aitem.author_id)"
                                >
                                  {{ aitem.name }}
                                </div>
                              </div>
                              <div v-else>
                                <div class="author-item">
                                  未查询到对应作者信息
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td>{{ item.publish_name }}</td>
                        <td>
                          <span>{{ item.cate_node_2 }}</span>
                          <span v-if="item.cate_node_3"
                            >> {{ item.cate_node_3 }}</span
                          >
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{
                            item.sale_total?item.sale_total.toLocaleString():'--'
                          }}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="percent" v-if="item.compare_rate > 0"
                            >+{{ item.compare_rate }}%</span
                          >
                          <span class="green" v-else-if="item.compare_rate < 0"
                            >{{ item.compare_rate }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div
                  v-else
                  style="height: 340px; position: relative; padding: 105px 0"
                >
                  <a-empty />
                </div>
              </div>
            </div>
            <div></div>
            <!-- 类目、出版单位排名 -->
            <div class="model-container clearfix">
              <div
                class="rank-data float-left model-bg"
                style="min-height: 689px"
              >
                <div class="section-title clearfix">
                  <div class="float-left">类目排名-{{ cateText }}</div>
                  <div
                    class="float-right click-font"
                    @click.stop="
                      $router.push({
                        name: 'industryrank',
                        query: { tabKey: '2' },
                      })
                    "
                  >
                    查看更多
                  </div>
                </div>
                <div class="table" v-if="cateRankList.length > 0">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="55" />
                      <col width="150" />
                      <col width="100" />
                      <col width="80" />
                      <col width="150" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>排名</td>
                        <td>品种</td>
                        <td style="text-align: right">销售指数</td>
                        <td style="text-align: right">占比</td>
                        <td style="text-align: right">上期对比</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item, index) in cateRankList" :key="index">
                        <td style="text-align: center">{{ item.sale_rank }}</td>
                        <td style="height: 61px">
                          <span class="main-font">{{ item.name }}</span>
                        </td>
                        <td style="text-align: right">
                          {{ item.sale_total?item.sale_total.toLocaleString():'--' }}
                        </td>
                        <td style="text-align: right">
                          {{ item.ratio.toFixed(2) }}%
                        </td>
                        <td style="text-align: right">
                          <span class="percent" v-if="item.compare_rate > 0"
                            >+{{ item.compare_rate }}%</span
                          >
                          <span class="green" v-else-if="item.compare_rate < 0"
                            >{{ item.compare_rate }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div v-else style="position: relative; padding: 258px 0">
                  <a-empty />
                </div>
              </div>
              <div
                class="rank-data float-right model-bg"
                style="min-height: 689px"
              >
                <div class="section-title clearfix">
                  <div class="float-left">出版单位排名-{{ cateText }}</div>
                  <!-- <div class="float-right click-font" @click="$refs.head.noOpen()">更多</div> -->
                </div>
                <div class="table" v-if="publishRankList.length > 0">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="55" />
                      <col width="150" />
                      <col width="100" />
                      <col width="80" />
                      <col width="150" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>排名</td>
                        <td>出版单位</td>
                        <td style="text-align: right">销售指数</td>
                        <td style="text-align: right">占比</td>
                        <td style="text-align: right">上期对比</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item, index) in publishRankList" :key="index">
                        <td style="text-align: center; height: 61px">
                          {{ item.sale_rank }}
                        </td>
                        <td>
                          <span class="main-font">{{ item.name }}</span>
                        </td>
                        <td style="text-align: right">
                          {{ item.sale_total?item.sale_total.toLocaleString():'--' }}
                        </td>
                        <td style="text-align: right">
                          {{ item.ratio.toFixed(2) }}%
                        </td>
                        <td style="text-align: right">
                          <span class="percent" v-if="item.compare_rate > 0"
                            >+{{ item.compare_rate }}%</span
                          >
                          <span class="green" v-else-if="item.compare_rate < 0"
                            >{{ item.compare_rate }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div v-else style="position: relative; padding: 258px 0">
                  <a-empty />
                </div>
              </div>
            </div>
            <!-- 地域排名 -->
            <div class="model-container">
              <div class="model-bg" v-if="regionRankList.length > 0">
                <div class="section-title">地域</div>
                <div class="clearfix" style="padding: 15px 0">
                  <div
                    class="float-left"
                    style="width: 500px; position: relative"
                  >
                    <div id="map" style="height: 284px; width: 100%"></div>
                  </div>
                  <div
                    class="float-left"
                    style="width: 500px; margin-left: 50px"
                  >
                    <p class="region-desc">地域（省）</p>
                    <div>
                      <div
                        style="
                          width: 500px;
                          display: inline-block;
                          vertical-align: top;
                        "
                      >
                        <div id="bar-chart"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="model-bg" v-else>
                <div class="section-title">地域</div>
                <div class="no-give" style="padding: 140px 0">
                  暂不提供类目下的地域分布数据
                </div>
              </div>
            </div>
            <!-- 渠道数据 -->
            <div v-if="showChannel">
              <div class="model-container">
                <div class="model-bg">
                  <div class="section-title">渠道数据</div>
                  <template v-if="channelList.length > 0">
                    <div class="table">
                      <table style="table-layout: fixed">
                        <colgroup>
                          <col width="700" />
                          <col width="140" />
                          <col width="100" />
                          <col width="100" />
                        </colgroup>
                        <thead>
                          <tr>
                            <td>渠道</td>
                            <td style="text-align: right">销售指数</td>
                            <td style="text-align: right">占比</td>
                            <td style="text-align: right">
                              <span v-if="dateType == 1">昨日对比</span>
                              <span v-if="dateType == 2">上周对比</span>
                              <span v-if="dateType == 3">上月对比</span>
                              <span v-if="dateType == 4">上年对比</span>
                            </td>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="(item, index) in channelList" :key="index">
                            <td>
                              <span
                                style="
                                  font-size: 18px;
                                  display: inline-block;
                                  vertical-align: middle;
                                "
                              >
                                <svg class="icon" aria-hidden="true">
                                  <use xlink:href="#icon-yizhan" />
                                </svg>
                              </span>
                              {{ item.platform_name }}
                              <span
                                class="click-font"
                                style="margin-left: 5px"
                                v-if="
                                  item.platform_name != '拼多多' &&
                                  item.platform_name != '其他'
                                "
                                @click="openShop(item)"
                                >进入店铺</span
                              >
                            </td>
                            <td style="text-align: right">
                              <span class="main-font">{{
                                item.sale_amount?item.sale_amount.toLocaleString():'--'
                              }}</span>
                            </td>
                            <td style="text-align: right">
                              <span class="main-font">{{
                                item.sale_ratio == "--"
                                  ? item.sale_ratio
                                  : (item.sale_ratio * 100).toFixed(2) + "%"
                              }}</span>
                            </td>
                            <td style="text-align: right">
                              <span class="percent" v-if="item.pre_compare > 0"
                                >{{ item.pre_compare }}% ↑</span
                              >
                              <span
                                class="green"
                                v-else-if="item.pre_compare < 0"
                                >{{ item.pre_compare }}% ↓</span
                              >
                              <span v-else>--</span>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <div class="channel-data" style="margin-top: 20px">
                      <!-- 图表 -->
                      <div style="width: 1040px" id="channel-chart"></div>
                    </div>
                  </template>
                  <div v-else class="no-give" style="padding:160px 0;">暂无渠道数据</div>
                </div>
              </div>
            </div>
            <div class="model-container" v-if="powerType == 1">
              <div class="model-bg channel-text" @click="changeChannel">
                {{ showChannel ? "隐藏渠道数据" : "展开渠道数据" }}
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style scoped lang="scss" src="@/style/scss/pages/industry/market.scss"></style>
<script>
import {
  INDUSTRY_INDEX,
  INDUSTRY_PLATFORMCHART,
  INDUSTRY_GOODSRANK,
  INDUSTRY_CATEGORYRANK,
  INDUSTRY_SUPPLIERRANK,
  INDUSTRY_REGIONRANK,
} from "../../apis/industry.js";
import { COMMON_CATEGORY } from "../../apis/common.js";
import { Chart } from "@antv/g2";
import { Scene } from "@antv/l7";
import { CountryLayer } from "@antv/l7-district";
import { Mapbox } from "@antv/l7-maps";
export default {
  data() {
    return {
      pagePower: true,
      brokenLineData: [],
      chartChange: null,
      saleTotal: 0,
      goodsRankList: [],
      cateRankList: [],
      publishRankList: [],
      regionRankList: [],
      plateList: [],
      plateChart: {},
      isLoading: true,
      categoryList: [],
      chooseCategory: [0],
      cateText: "所有类目",
      catePopup: false,
      compareRate: 0,
      lastCompareRate: 0,
      barChart: null,
      barMapData: [],
      dateType: 2,
      eventList: [],
      timeList: [],
      briefingInfo: {
        main_cate: {
          main_cate_name: "",
          sale_ratio: 0,
          compare_rate: 0,
        },
        best_goods: {
          goods_name: "",
          sale_total: 0,
          cate_name: "",
          goods_id: 0,
        },
        sale_abnormal: {
          incr_count: 0,
          decr_count: 0,
        },
        industry_new: {
          onsale_num: 0,
          new_sale_num: 0,
          new_sale_amount: 0,
          ratio: 0,
        },
      },
      // 渠道数据
      showChannel: false,
      channelList: [],
      channelChart: null,
      channelChartList: [],
      jdList: [],
      ddList: [],
      wphList: [],
      pddList: [],
      gwList: [],
      otherList: [],
      timeList: [],
      channelFirst: true,
      powerType: 2,
    };
  },
  mounted() {
    this.powerType = this.$refs.head.accountInfo.type;
    this.getData();
    this.getGoddsData();
    this.getCateData();
    this.getSupplierData();
    this.getRegionData();
    this.getFirstCategory();
  },
  updated() {},
  methods: {
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        date_type: this.$refs.time.dateType,
        start_date: this.$refs.time.oneDay,
        period: this.$refs.time.cycle,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_INDEX(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.compareRate = res.data.all_info.compare_rate;
        this.lastCompareRate = res.data.all_info.last_compare_rate;
        this.saleTotal = res.data.all_info.sale_total;
        this.briefingInfo = res.data.briefing;
        this.brokenLineData = [];
        this.plateList = [];
        this.eventList = [];
        this.timeList = [];
        this.eventList = res.data.all_info.chart_data.event_data;
        let _arr1 = [],
          _arr2 = [],
          _length = 0;
        res.data.all_info.chart_data.current_data.map((value, key) => {
          let _obj = {};
          _obj.month = value.date.toString();
          _obj.city = "当期";
          _obj.temperature = value.value;
          if (value.week_range) {
            _obj.range = value.week_range;
          }
          this.timeList.unshift(value.date.toString());
          _arr1.unshift(_obj);
        });
        res.data.all_info.chart_data.last_data.map((value, key) => {
          let _obj = {};
          _obj.month = value.date.toString();
          _obj.city = "上年同期";
          _obj.temperature = value.value;
          if (value.week_range) {
            _obj.range = value.week_range;
          }
          _arr2.unshift(_obj);
        });
        if (_arr1.length > _arr2.length) {
          _length = _arr1.length;
        } else {
          _length = _arr2.length;
        }
        for (let i = 0; i < _length; i++) {
          if (_arr1.length > i) {
            this.brokenLineData.push(_arr1[i]);
          }
          if (_arr2.length > i) {
            this.brokenLineData.push(_arr2[i]);
          }
        }
        let _this = this;
        this.$nextTick(() => {
          if (_this.chartChange) {
            _this.chartChange.destroy();
            _this.lineDataInit();
          } else {
            _this.lineDataInit();
          }
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取品种排行
    async getGoddsData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        date_type: this.$refs.time.dateType,
        start_date: this.$refs.time.oneDay,
        period: this.$refs.time.cycle,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_GOODSRANK(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.goodsRankList = [];
        res.data.map((value, key) => {
          value.active = false;
          this.goodsRankList.push(value);
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取类目排行
    async getCateData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        date_type: this.$refs.time.dateType,
        start_date: this.$refs.time.oneDay,
        period: this.$refs.time.cycle,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_CATEGORYRANK(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.cateRankList = [];
        this.cateRankList = res.data;
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取供应商排行
    async getSupplierData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        date_type: this.$refs.time.dateType,
        start_date: this.$refs.time.oneDay,
        period: this.$refs.time.cycle,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_SUPPLIERRANK(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.publishRankList = [];
        this.publishRankList = res.data;
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取地域排行
    async getRegionData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        date_type: this.$refs.time.dateType == 1 ? 2 : this.$refs.time.dateType,
        start_date: this.$refs.time.oneDay,
        period:
          this.$refs.time.dateType == 1
            ? this.$getCurrenWeek(this.$refs.time.dateText)
            : this.$refs.time.cycle,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_REGIONRANK(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.regionRankList = [];
        this.regionRankList = res.data.splice(0, 10).map((value, key) => {
          this.barMapData.push(value.name);
          value.region_name = value.name;
          return value;
        });
        this.regionRankList = this.regionRankList.reverse();
        let _this = this;
        if (this.regionRankList.length > 0) {
          this.$nextTick(() => {
            if (_this.barChart) {
              _this.barChart.destroy();
              _this.initBar();
            } else {
              _this.initBar();
            }
            _this.initMap();
          });
        }
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取初级分类列表
    async getFirstCategory() {
      var tStamp = this.$getTimeStamp();
      let data = {
        // floor: 2,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMMON_CATEGORY(data);
      if (res.code == 0) {
        this.categoryList = [];
        let _data = {
          category_id: 0,
          name: "所有类目",
          pid: 0,
        };
        this.categoryList.push(_data);
        res.data.map((value, key) => {
          this.categoryList.push(value);
        });
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 获取渠道数据
    async getChannel() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        date_type: this.$refs.time.dateType,
        start_date: this.$refs.time.oneDay,
        period: this.$refs.time.cycle,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_PLATFORMCHART(data);
      if (res.code == 0) {
        this.showChannel = true;
        this.channelList = [];
        this.channelChartList = [];
        this.channelList = res.data;
        if (res.data.length > 0) {
          let _arr1 = [],
            _arr2 = [],
            _arr3 = [],
            _arr4 = [],
            _arr5 = [],
            _arr6 = [],
            _arr7 = [];
          res.data.map((value, key) => {
            value.current_data.map((value1) => {
              let _obj = {
                platform: value.platform_name,
                date: value1.date.toString(),
                value: value1.value,
                range: value1.week_range,
              };
              if (value.platform_name == res.data[0].platform_name) {
                _arr1.unshift(_obj);
              } else if (value.platform_name == res.data[1].platform_name) {
                _arr2.unshift(_obj);
              } else if (value.platform_name == res.data[2].platform_name) {
                _arr3.unshift(_obj);
              } else if (value.platform_name == res.data[3].platform_name) {
                _arr4.unshift(_obj);
              } else if (value.platform_name == res.data[4].platform_name) {
                _arr5.unshift(_obj);
              } else if (value.platform_name == res.data[5].platform_name) {
                _arr6.unshift(_obj);
              } else if (value.platform_name == res.data[6].platform_name) {
                _arr7.unshift(_obj);
              }
            });
          });
          this.channelChartList = [
            ..._arr1,
            ..._arr2,
            ..._arr3,
            ..._arr4,
            ..._arr5,
            ..._arr6,
            ..._arr7,
          ];
          let _this = this;
          this.$nextTick(() => {
            if (_this.channelChart) {
              _this.channelChart.destroy();
              _this.initChannel();
            } else {
              _this.initChannel();
            }
          });
        }
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.$refs.head.globalTip(1, "暂无权限", 0);
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 渠道数据
    changeChannel() {
      if (this.showChannel) {
        this.showChannel = false;
      } else {
        this.getChannel();
      }
    },
    // 进入店铺
    openShop(item) {
      let _url;
      if (item.platform_name == "天猫") {
        _url = "https://bokuts.tmall.com/";
      } else if (item.platform_name == "京东") {
        _url = "https://mall.jd.com/index-38566.html?from=pc";
      } else if (item.platform_name == "当当") {
        _url = "http://shop.dangdang.com/12244";
      } else if (item.platform_name == "官网") {
        _url = "https://www.bookuu.com/";
      } else if (item.platform_name == "唯品会") {
        _url = "https://list.vip.com/mplist.html?storeId=ST42525064";
      }
      this.$openNewPage(2,_url);
    },
    changeTime() {
      this.isLoading = true;
      this.dateType = this.$refs.time.dateType;
      this.getData();
      this.getGoddsData();
      this.getCateData();
      this.getSupplierData();
      this.getRegionData();
      if (this.showChannel) {
        this.getChannel();
      }
    },
    // 选择分类
    selectCategory(value, selectedOptions) {
      let _text = [];
      this.catePopup = false;
      this.isLoading = true;
      selectedOptions.map((val, key) => {
        _text.push(val.name);
      });
      this.cateText = _text.join(">");
      this.getData();
      this.getGoddsData();
      this.getCateData();
      this.getSupplierData();
      this.getRegionData();
      if (this.showChannel) {
        this.getChannel();
      }
    },
    openAuthor(item, index) {
      this.$refs.time.showYear = false;
      this.catePopup = false;
      this.goodsRankList = this.goodsRankList.map((value, key) => {
        if (index == key) {
          value.active = true;
        } else {
          value.active = false;
        }
        return value;
      });
    },
    cateClick() {
      this.catePopup = true;
      this.$refs.time.showYear = false;
      this.goodsRankList = this.goodsRankList.map((value, key) => {
        value.active = false;
        return value;
      });
    },
    bodyClick() {
      this.$refs.time.showYear = false;
      this.catePopup = false;
      this.goodsRankList = this.goodsRankList.map((value, key) => {
        value.active = false;
        return value;
      });
    },
    lineDataInit() {
      let _this = this;
      this.chartChange = new Chart({
        container: "broken-linedata",
        autoFit: true,
        height: 120,
      });

      this.chartChange.data(this.brokenLineData);
      this.chartChange.scale({
        month: {
          range: [0, 1],
        },
        temperature: {
          nice: true,
          min: 0,
        },
      });
      this.chartChange.tooltip({
        showCrosshairs: true,
        shared: true,
      });
      this.chartChange.axis("month", {
        label: {
          formatter: function (value, item, index) {
            if (
              _this.$refs.time.dateType == 1 ||
              _this.$refs.time.dateType == 2 ||
              _this.$refs.time.dateType == 3
            ) {
              if (index % 2 == 0) {
                return value;
              } else {
                return "";
              }
            } else {
              return value;
            }
          },
          autoHide: false | true,
          autoRotate: false,
        },
      });
      this.chartChange.axis("temperature", {
        label: {
          formatter: (val) => {
            return val;
          },
        },
      });
      if (this.$refs.time.dateType == 1) {
        for (let i = 0; i < this.eventList.length; i++) {
          if (_this.eventList[i].start_date == _this.eventList[i].end_date) {
            this.chartChange.annotation().dataMarker({
              position: { month: _this.eventList[i].start_date },
              top: true,
              text: {
                content: _this.eventList[i].title,
                style: {
                  fontSize: 13,
                },
              },
              line: {
                length: 15 + (i > 3 ? 3 : i) * 15,
              },
            });
          } else {
            let sdate, edate;
            if (_this.timeList.includes(_this.eventList[i].start_date)) {
              sdate = _this.eventList[i].start_date;
            } else {
              sdate = _this.timeList[0];
            }
            if (_this.timeList.includes(_this.eventList[i].end_date)) {
              edate = _this.eventList[i].end_date;
            } else {
              edate = _this.timeList[_this.timeList.length - 1];
            }
            this.chartChange.annotation().text({
              position: [sdate, "median"],
              content: _this.eventList[i].title,
              style: {
                fill: "#6b6b6b",
                fontWeight: 300,
                textAlign: "start",
                textBaseline: "center",
              },
            });
            this.chartChange.annotation().region({
              start: [sdate, "min"],
              end: [edate, "max"],
              style: {
                lineWidth: 0,
                fill: "#1754D2",
                fillOpacity: 0.05,
                stroke: "#ccc",
              },
            });
          }
        }
      }
      this.chartChange.legend(false);
      this.chartChange
        .line()
        .position("month*temperature")
        .color("city", (city) => {
          if (city == "上年同期") {
            return "#D1DDF6";
          } else if (city == "当期") {
            return "#5A8BEE";
          }
        })
        .shape("circle")
        .style({ lineWidth: 2 })
        .tooltip(
          "month*temperature*city*range",
          function (month, temperature, city, range) {
            // tooltip的第一个参数写上需要显示的字段'item1*item2*...'；第二个参数为一个函数，该函数的参数为需要显示的字段。
            let _title;
            if (_this.$refs.time.dateType == 2) {
              _title = month + "（" + range + "）";
            } else {
              _title = month;
            }
            return {
              title: _title,
              name: city,
              value: temperature, // 这里也可以通过调用其他自定义函数的方式，去对数据进行更深层次的变换。但要注意this的指向问题！
            };
          }
        );

      this.chartChange
        .point()
        .position("month*temperature")
        .color("city", (city) => {
          if (city == "上年同期") {
            return "#D1DDF6";
          } else if (city == "当期") {
            return "#5A8BEE";
          }
        })
        .tooltip(false)
        .shape("circle");

      this.chartChange.render();
    },
    initMap() {
      let _this = this;
      const scene = new Scene({
        id: "map",
        logoVisible: false,
        map: new Mapbox({
          center: [116.2825, 39.9],
          // center:[0,0],
          pitch: 0,
          style: "blank",
          zoom: 3,
          minZoom: 1,
          maxZoom: 10,
        }),
      });
      scene.setMapStatus({
        dragEnable: false, //是否允许地图拖拽
        keyboardEnable: false, // 是否允许形键盘事件
        doubleClickZoom: false, // 双击放大
        zoomEnable: false, // 滚动缩放
        rotateEnable: false, // 旋转
      });
      const attachMapContainer = document.createElement("div");
      attachMapContainer.id = "attach";
      attachMapContainer.style.cssText =
        "position: absolute;height:80px;width:50px;right:50px;bottom:20px;border:1px solid #F4F7FD;";
      document.getElementById("map").parentElement.append(attachMapContainer);

      scene.on("loaded", () => {
        new CountryLayer(scene, {
          data: [],
          joinBy: ["NAME_CHN", "name"],
          depth: 1,
          provinceStroke: "#FFF",
          stroke: "#D1DDF5",
          countyStroke: "#FFF",
          cityStroke: "#FFF",
          cityStrokeWidth: 0,
          // chinaNationalWidth: 0,
          coastlineWidth: 0,
          chinaNationalStroke: "#D1DDF5",
          label: {
            enable: false,
          },
          fill: {
            color: {
              field: "NAME_CHN",
              values:
                ("name",
                function (value) {
                  let _arr = _this.barMapData;
                  if (value.indexOf(_arr[0]) > -1) {
                    return "#4777D8";
                  } else if (value.indexOf(_arr[1]) > -1) {
                    return "#6E94E1";
                  } else if (value.indexOf(_arr[2]) > -1) {
                    return "#82A3E5";
                  } else if (value.indexOf(_arr[3]) > -1) {
                    return "#96B2E8";
                  } else if (value.indexOf(_arr[4]) > -1) {
                    return "#A0B9EA";
                  } else if (value.indexOf(_arr[5]) > -1) {
                    return "#BDCEF1";
                  } else {
                    return "#D1DDF5";
                  }
                }),
            },
            activeColor: "#4777D8",
          },
          popup: {
            enable: true,
            Html: (props) => {
              return `<span>${props.NAME_CHN}</span>`;
            },
          },
        });
      });

      // 添加附图，附图需要和主图保持一致
      const scene2 = new Scene({
        id: "attach",
        logoVisible: false,
        map: new Mapbox({
          center: [113.60540108435657, 12.833692637803168],
          pitch: 0,
          style: "blank",
          zoom: 1.93,
          minZoom: 0,
          maxZoom: 3,
          interactive: false,
        }),
      });
      scene2.on("loaded", () => {
        new CountryLayer(scene2, {
          data: [],
          label: {
            enable: false,
          },
          popup: {
            enable: true,
          },
          autoFit: false,
          depth: 1,
          fill: {
            color: {
              field: "NAME_CHN",
              values: [
                "#feedde",
                "#fdd0a2",
                "#fdae6b",
                "#fd8d3c",
                "#e6550d",
                "#a63603",
              ],
            },
          },
        });
      });
    },
    initBar(_max) {
      let _this = this,
        _height = this.regionRankList.length * 26;
      this.barChart = new Chart({
        container: "bar-chart",
        autoFit: true,
        height: _height,
      });
      this.barChart.data(this.regionRankList);
      this.barChart.scale({
        compare_rate: {
          // max: this.barMax + 100,
          max: 150,
          min: 0,
          alias: " ",
        },
      });
      this.barChart.axis("region_name", {
        title: null,
        tickLine: null,
        grid: null,
        line: null,
        label: {
          textStyle: {
            textAlign: "left",
          },
        },
      });

      this.barChart.axis("compare_rate", {
        label: null,
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              fillOpacity: 0,
              strokeOpacity: 0,
            },
          },
        },
        title: null,
      });
      this.barChart.legend(false);
      this.barChart.coordinate().transpose();
      this.barChart.tooltip(false);
      this.barChart
        .interval()
        .position("region_name*compare_rate")
        .size(8)
        .label("compare_rate", {
          style: {
            fill: "#7789af",
            autoHide: false | true,
          },
          // offset: 10,
          content: (originData) => {
            return originData.compare_rate + "%";
          },
          remove: false,
        });
      // chart.interaction("element-active");
      this.barChart.render();
    },
    // 渲染渠道图表
    initChannel() {
      let _this = this;
      this.channelChart = new Chart({
        container: "channel-chart",
        autoFit: true,
        height: 300,
        appendPadding: [0, 0],
      });
      this.channelChart.data(_this.channelChartList);
      this.channelChart.scale({
        date: {
          range: [0, 1],
        },
        value: {
          nice: true,
        },
      });
      this.channelChart.axis("date", {
        tickLine: null,
        label: {
          formatter: function (value, item, index) {
            if (_this.$refs.time.dateType == 1) {
              if (index % 2 == 0) {
                return value;
              } else {
                return "";
              }
            } else {
              return value;
            }
          },
          autoHide: false | true,
          autoRotate: false,
        },
      });
      this.channelChart.tooltip({
        showCrosshairs: true,
        shared: true,
      });
      this.channelChart
        .area()
        .adjust("stack")
        .position("date*value")
        .color("platform");
      this.channelChart
        .line()
        .adjust("stack")
        .position("date*value")
        .color("platform")
        .size(1);
      this.channelChart.interaction("element-highlight");
      this.channelChart.render();
    },
    publisherChange() {
      this.isLoading = true;
      this.chooseCategory = [0];
      this.showChannel = false;
      this.cateText = "所有类目";
      this.$refs.time.cycle = this.$beforeDate().replace(/-/g, "");
      this.$refs.time.oneDay = this.$beforeDate().replace(/-/g, "");
      this.$refs.time.chooseDate = this.$beforeDate();
      this.$refs.time.chooseWeek = this.$beforeDate();
      this.$refs.time.chooseMonth = this.$beforeDate();
      this.$refs.time.chooseYear = this.$beforeDate();
      this.$refs.time.dateText = this.$beforeDate();
      this.$refs.time.dateType = 1;
      this.$refs.time.canAdd = false;
      this.$refs.time.canSub = true;
      this.$refs.time.showYear = false;
      this.dateType = 1;
      this.getData();
      this.getGoddsData();
      this.getCateData();
      this.getSupplierData();
      this.getRegionData();
    },
  },
};
</script>
